<!--评论管理-->
<template>
    <div class="comment-admin">
        <h3>评论列表</h3>
        <el-card>
            <el-form>
                <div class="select-bar">
                    <el-row :gutter="5">
                        <el-col :span="10">
                            <el-form-item >
                                <el-input v-model="search" placeholder="输入评论内容" clearable class="search-input"
                                    @keyup.enter.native="handleSearch" size="medium" @clear="reset" />
                                     <el-button type="primary" v-click-blur @click="handleSearch" size="medium" 
                                    plain>搜索</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item>
                            <el-button size="medium" v-click-blur type="danger" @click="handleBatchDelete"
                                :disabled="selectedComments.length == 0">批量删除</el-button>
                        </el-form-item>
                    </el-row>
                </div>
            </el-form>

            <el-table :data="comments" :header-cell-style="{ background: '#F5F6FA', color: '#000' }" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="商品图片" width="120">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.mainImage" style="width: 80px; height: 80px;"
                            :src="$getImgUrl(scope.row.mainImage)" fit="cover" />
                        <span v-else>暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" min-width="140" />
                <el-table-column prop="userName" label="用户名称" width="120" />
                <el-table-column label="规格" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.colorName }} / {{ scope.row.sizeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="rating" label="评分" width="100">
                    <template slot-scope="scope">
                        <el-rate v-model="scope.row.rating" disabled show-score text-color="#ff9900" />
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="评论内容" min-width="160" show-overflow-tooltip />
                <el-table-column label="评论图片" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.images" class="comment-images">
                            <el-image v-for="(img, index) in scope.row.images.split(',')" :key="index"
                                style="width: 40px; height: 40px; margin-right: 5px;" :src="$getImgUrl(img)"
                                fit="cover" :preview-src-list="scope.row.images.split(',').map(i => $getImgUrl(i))" />
                        </div>
                        <span v-else>无图片</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="评论时间" width="160">
                    <template slot-scope="scope">
                        <span>{{ formatTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" v-click-blur type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="footer" v-if="page.total > 0">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next" :total="page.total" class="pagination" />
            </div>
        </el-card>
    </div>
</template>

<script>
import { getComments, removeComment, removeCommentBatch } from '@/apis/comment'

export default {
    name: 'CommentAdmin',
    data() {
        return {
            comments: [],
            search: '',
            productName: '',
            selectedComments: [],
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            }
        }
    },
    created() {
        this.getCommentList()
    },
    methods: {
        // 处理表格选中
        handleSelectionChange(selection) {
            this.selectedComments = selection.map(item => item.commentId)
        },
        // 获取评论列表
        async getCommentList() {
            const params = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                search: this.search || null,
                productName: this.productName || null
            }
            const res = await getComments(params)
            if (res && res.data) {
                this.comments = res.data.records || res.data
                this.page.total = res.data.total || (Array.isArray(this.comments) ? this.comments.length : 0)
            }
        },
        // 重置
        reset() {
            this.search = ''
            this.productName = ''
            this.page.pageNum = 1
            this.getCommentList()
        },
        // 处理分页大小变化事件
        handleSizeChange(size) {
            this.page.pageSize = size
            this.page.pageNum = 1
            this.getCommentList()
        },
        // 处理当前页码变化事件
        handleCurrentChange(page) {
            this.page.pageNum = page
            this.getCommentList()
        },
        // 搜索
        handleSearch() {
            this.page.pageNum = 1
            this.getCommentList()
        },
        // 删除评论
        handleDelete(row) {
            this.$confirm('确认删除该评论吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeComment(row.commentId).then(() => {
                    this.getCommentList()
                })
            }).catch(() => {
                // 用户点了取消或关闭确认框，不做任何处理
            })
        },
        // 批量删除评论
        handleBatchDelete() {
            this.$confirm(`确认删除选中的 ${this.selectedComments.length} 条评论吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeCommentBatch(this.selectedComments).then(() => {
                    this.getCommentList()
                })
            }).catch(() => {
                // 用户点了取消或关闭确认框，不做任何处理
            })
        },
        // 格式化时间
        formatTime(time) {
            if (!time) return ''
            return time.replace('T', ' ')
        }
    }
}
</script>

<style lang='less' scoped>
.comment-admin {
    padding: 20px;
}

.search-input {
    width: 220px;
    margin-right: 10px;
}

.footer {
    margin-top: 16px;
    text-align: right;
}

.comment-images {
    display: flex;
    flex-wrap: wrap;
}

/**解决el-button的:focus引起的样式问题*/
.el-button.is-link:not(.is-disabled):focus,
.el-button.is-link:not(.is-disabled):hover {
    color: var(--el-button-text-color);
}
</style>